<template>
  <div ref="carouselRef" class="an-carousel">
    <div
      v-for="(item, index) in dailyImage"
      :key="index"
      ref="itemRefs"
      class="an-carousel-item"
      :style="{ backgroundImage: `url(${item.imageUrl})` }"
      @mouseout="clearTimer"
      @mouseleave="startTimer"
    >
      <div v-if="arrow" class="absolute flex justify-between transform -translate-y-1/2 left-0 right-0 top-1/2">
        <span class="arrow-btn rounded-tr-md rounded-br-md" @click="prev">❮</span>
        <span class="arrow-btn rounded-tl-md rounded-bl-md" @click="next">❯</span>
      </div>
    </div>
  </div>
  <!-- 添加的文字部分 -->
  <div
    class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center cursor-pointer"
    @click="changeOneSentence"
  >
    <div v-if="title">
      <p class="text-white text-4xl textSpace">{{ title }}</p>
    </div>
    <div v-else>
      <p class="text-white text-2xl textSpace">
        {{ poetry.hitokotoText }}
      </p>
      <p class="text-white text-xl mt-3 text-right textSpace">
        {{ poetry.from }}
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type { BannerState } from "~/types/banner";
import type { Poetry } from "~/types/poetry";
const props = defineProps({
  dailyImage: {
    type: Array as PropType<BannerState[]>,
    default: () => [],
  },
  title: {
    type: String,
    default: "",
  },
  duration: {
    type: Number,
    default: 60000, // 默认一分钟
  },
  interval: {
    type: Boolean,
    default: false,
  },
  arrow: {
    type: Boolean,
    default: false,
  },
});
let timer: NodeJS.Timer; // 清楚定时器
let isHover = false; // hover时不轮播
const route = useRouter();
const len = computed(() => props.dailyImage.length);

const carouselRef = ref();
// 多个ref就绑定为数组
const itemRefs = ref([]);
const currentIndex = ref(0);
const poetry = reactive<Poetry>({
  hitokotoText: "",
  from: "",
  fromWho: "",
});

// 诗词接口
const fetchHitokoto = async () => {
  const response = await fetch("https://v1.hitokoto.cn/?c=i");
  const {
    hitokoto: hitokotoText,
    from,
    from_who: fromWho,
  } = await response.json();
  // 给 poetry 中的属性赋值
  poetry.hitokotoText = hitokotoText;
  poetry.from =
    from != null && fromWho != null
      ? `${fromWho} - 「${from}」`
      : fromWho ?? from;
};
// 点击切换
const changeOneSentence = async () => {
  await fetchHitokoto();
};

onMounted(() => {
  startTimer();
  if (route.currentRoute.value.fullPath == "/") {
    fetchHitokoto();
  }
});
onUnmounted(() => {
  clearTimer();
});
const clearTimer = () => {
  isHover = true;
  clearInterval(timer);
};
const startTimer = () => {
  isHover = false;
  timer = setInterval(() => {
    if (isHover) {
      return;
    }
    next();
  }, props.duration);
};

// 设置滚动条
const setScrollLeft = () => {
  const dom: HTMLElement = itemRefs.value[currentIndex.value];
  if (dom) {
    const left = dom.offsetWidth;
    carouselRef.value.scrollLeft = currentIndex.value * left;
  }
};

const next = () => {
  currentIndex.value++;
  if (currentIndex.value >= len.value) {
    currentIndex.value = 0;
  }
  setScrollLeft();
};
const prev = () => {
  currentIndex.value--;
  if (currentIndex.value <= 0) {
    currentIndex.value = len.value - 1;
  }
  setScrollLeft();
};
</script>
<style lang="less" scoped>
.an-carousel {
  height: 100px;
  border-radius: 0 0 8px 8px;
  @apply carousel w-full h-full from-black bg-gradient-to-r to-gray-700 relative;
}
.an-carousel-item {
  object-fit: cover;
  background-position: center;
  @apply carousel-item w-full relative bg-cover;
}
.arrow-btn {
  @apply bg-black bg-opacity-20 h-16 px-4 py-2 cursor-pointer text-white flex justify-center items-center transition-transform scale-0 duration-500 hover:bg-black hover:bg-opacity-25;
}
.an-carousel:hover .arrow-btn {
  @apply scale-100;
}
.textSpace {
  letter-spacing: 15px;
}
</style>
